<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>微博列表页面</h1>
<div>
<div v-for="weibo in arr">
    <h3>{{weibo.content}}</h3>
<!--    遍历新增的urlArr数组 每遍历一次生成一个图片标签-->
    <img v-for="url in weibo.urlArr" :src="url"
         style="width: 100px;height: 100px;" >
    <hr>
</div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            arr:[]
        },
        created:function () {
            //进入页面后立即发送请求获取所有微博的数据
            axios.get("/select").then(function (response) {
                v.arr=response.data;
                for (let weibo of v.arr){
                    //给微博对象添加一个url数组的属性是多个图片地址
                    //如果图片路径是空字符串则直接赋值为空数组,如果不再拆分
                    weibo.urlArr = weibo.urls==""?[]:weibo.urls.split(",");
                }
            })
        }
    })
</script>
</body>
</html>